<template>
  <div>
    <div>
      <van-nav-bar fixed class="bgc">
        <template #left>
          <img class="logo" src="@/assets/toutiao_logo.png" alt="" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 切换栏 -->
    <div>
      <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem" @change="changeList">
        <van-tab :title="item.name" v-for="item in channelsList1" :key="item.id" :name="item.id">
          <ArticleList :list="ArticleList"
        /></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ArticleList from './components/ArticleList.vue'
import { channelsList, articlesListAPI } from '@/api/user'
export default {
  components: {
    ArticleList
  },
  data () {
    return {
      channelId: 0,
      channelsList1: [],
      ArticleList: []
    }
  },
  computed: {},
  filters: {},
  watch: {},
  async mounted () {
    const res = await channelsList()
    console.log(res.data.data.channels)
    this.channelsList1 = res.data.data.channels
    this.changeList()
  },
  methods: {
    async changeList () {
      const res2 = await articlesListAPI({
        channelId: this.channelId,
        timestamp: new Date().getTime()
      })
      console.log(res2)
      this.ArticleList = res2.data.data.results
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
.bgc {
  background-color: #007bff;
}
/* tab内容距离tab导航的距离 */
/deep/ .van-tabs__content {
  padding-top: 44px;
}
</style>
